import React from 'react';
import { Card } from 'antd';
import styles from './index.less';

/**
 * 自定义Card组件
 * 扩充Antd的Card可使Title左侧出现标记
 */
const CardTitle = ({ children, headMark, markColor }) => (
    <div className={styles.cardTitle}>
        <>
            {headMark && <i className={styles.cardTitleMark} style={{ backgroundColor: markColor }}></i>}
            {children}
        </>
    </div>
);

const CardComponent = ({ children, title, headMark, markColor, headBorder, className, ...props }) => (
    <div className={styles.cardWrapper}>
        <Card
            className={`${className || ''} ${headBorder ? styles.noHeaderBorder : ''}`}
            title={
                title ? (
                    <CardTitle headMark={headMark} headBorder markColor={markColor}>
                        {title}
                    </CardTitle>
                ) : null
            }
            {...props}
        >
            {children}
        </Card>
    </div>
);

export default CardComponent;
